{% load humanize %}

<script type="text/javascript">
	$( $(".btn[id^='pag']") ).click(function() {
        pago_id = $(this).attr('pago');
		$.ajax({
                url: "/cartera/estudiantes/pagar/",
                type: "POST",
                data : {pago_id:pago_id,
                        csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                         },
                dataType: "html",
                success: function(datos) {
                    $('#pagar').html(datos);
                }
            });
    });

</script>
<input type="hidden" id="matricula_id" name="matricula_id" value="{{ matricula_id }}"/>
<div class="widget widget-table">
    <table class="table table-striped table-bordered table-highlight" id="tblHistorial">
        <thead>
            <tr>
                <th width="10%" align="center">Cuota</th>
                <th width="20%" align="center">Fecha</th>
                <th width="15%" align="center">Valor</th>
                <th width="15%" align="center">Pagado</th>
                <th width="55%" align="center">Observaciones</th>
                <th width="10%" align="center">Acciones</th>
            </tr>
        </thead>
        <tbody>
            {% for pago in pagos %}
        <tr class="{% cycle '' 'odd' %}">
            <td>{{ forloop.counter }}</td>
            <td>{{ pago.fecha|date:'d-m-Y' }}</td>
            <td>{{ pago.valor|intcomma }}</td>
            <td>{{ pago.pagado|intcomma }}</td>
            <td align="center">{{ pago.observacion }}</td>
            <td align="center"><a href="#modalPagar" id="pagar{{ pago.id }}" pago="{{ pago.id }}" data-toggle="modal" class="btn">Pagar</a></td>
        </tr>
    {% endfor %}
        </tbody>
    </table>
</div> <!-- /. widget-table -->